import {designPage} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Badge, Button} from "../../../../packages";

export default designPage(() => {
  return () => (
    <div>
      <DemoRow title={'基本用法'}>
        <Badge data={12}>
          <Button label={'消息'}/>
        </Badge>
      </DemoRow>
      <DemoRow title={'颜色'}>
        <Badge data={12} status="primary">
          <Button label={'Primary'}/>
        </Badge>
        <Badge data={12} status="success">
          <Button label={'Success'} color="success"/>
        </Badge>
        <Badge data={12} status="warning">
          <Button label={'Warn'} status="warning"/>
        </Badge>
        <Badge data={12} status="error">
          <Button label={'Error'} status="error"/>
        </Badge>
      </DemoRow>
      <DemoRow title={'位置'}>
        <Badge data={12} bottom={false} start={true}>
          <Button label={'消息'}/>
        </Badge>
        <Badge data={12} bottom={false} start={false}>
          <Button label={'消息'}/>
        </Badge>
        <Badge data={12} bottom={true} start={true}>
          <Button label={'消息'}/>
        </Badge>
        <Badge data={12} bottom={true} start={false}>
          <Button label={'消息'}/>
        </Badge>
      </DemoRow>
      <DemoRow title={'仅显示小红点'}>
        <Badge data={12} dot>
          <Button label={'消息'}/>
        </Badge>
      </DemoRow>
      <DemoRow title={'最大值'}>
        <Badge data={200} max={99}>
          <Button label={'消息'}/>
        </Badge>
      </DemoRow>
    </div>
  );
});
